<template>
	<view id="index">
		<u-form class="form" :model="leaveData" ref="eliminateForm" labelWidth="80">
			<!-- 上一条请假记录 -->
			<!-- <u-form-item label="学生姓名" prop="stuName">
				<u-input :value="leaveData.stuName" disabled />
			</u-form-item> -->

			<!-- <u-form-item label="学号" prop="sno">
				<u-input :value="leaveData.sno" disabled />
			</u-form-item> -->

			<u-form-item label="请假类型" prop="leaveType">
				<u-input :value="item.name" v-for="(item,index) in LeaveTypesOptions"
					v-if="item.value == leaveData.leaveType" disabled />
			</u-form-item>

			<u-form-item label="开始时间" prop="beginTime">
				<u-input :value="leaveData.beginTime" disabled />
			</u-form-item>

			<u-form-item label="结束时间" prop="endTime">
				<u-input :value="leaveData.endTime" disabled />
			</u-form-item>

			<u-form-item label="请假天数" prop="duration">
				<u-input :value="leaveData.duration / 10" disabled />
			</u-form-item>

			<u-form-item label="请假原因" prop="cause">
				<!-- <u-input :value="leaveData.cause" disabled /> -->
				<uni-easyinput type="textarea" maxlength="200" disabled v-model="leaveData.cause" trim="all"
					placeholder="请输入请假原因"></uni-easyinput>
			</u-form-item>

			<!-- 拍照销假组件 -->
			<u-form-item :required="true" label="上传照片" prop="fileData">
				<cover-image class="uploadImgBox" mode="aspectFill" @click="photo" v-model="fileData"
					:src="this.fileData.thumb" />
			</u-form-item>

			<view class="btn-area" style="text-align: center; margin: 20rpx;">
				<button @click="submitEliminate" :disabled="submitDisabled">确认销假</button>
			</view>
		</u-form>

		<!-- 免责书 -->
		<uni-modal v-if="show">
			<div class="uni-mask"></div>
			<div class="uni-modal">
				<div class="uni-modal__hd"><strong class="uni-modal__title">免责声明</strong></div>
				<div class="uni-modal__bd content">
					<span v-html="disclaimer" />
				</div>
				<div class="uni-modal__ft">
					<div class="uni-modal__btn uni-modal__btn_default" style="color: rgb(0, 0, 0);"
						@click="cancelDisclaimer"> 取消 </div>
					<div class="uni-modal__btn uni-modal__btn_primary" style="color: rgb(0, 122, 255);"
						@click="checkDisclaimer"> 同意 </div>
				</div>
			</div>
		</uni-modal>
	</view>
</template>

<script>
	import {
		addStuEliminate
	} from "@/api/client/eliminate";

	import {
		getStuLeaveLast
	} from "@/api/client/leave";

	import {
		getDicts
	} from "@/api/system/dict/data";

	import {
		getUser,
		setUser
	} from "@/utils/auth";

	import upload from "@/utils/upload";

	export default {
		onLoad() {
			getDicts("leave_types").then((response) => {
				// console.log(response);
				//遍历字典数组并重新赋值LeaveTypesOptions
				this.LeaveTypesOptions = response.data.map(item => {

					return {
						name: item.dictLabel,
						value: item.dictValue
					};
				});
			});
		},
		data() {
			return {
				show: true,
				submitDisabled: false,
				user: {},
				leaveData: {
					stuName: "",
					sno: "",
					leaveType: "",
					beginTime: "",
					endTime: "",
					duration: "",
					cause: "",
				},
				fileData: {
					name: "",
					size: "",
					thumb: "",
					type: "",
					url: "",
				},
				eliminateData: {
					applyLeaveId: "",
					location: "",
					fileId: "",
					disclaimerId: "",
				},
				rules: {
					fileData: {
						required: true,
						message: "请上传照片",
						trigger: ["blur", "change"],
					},
				},
				LeaveTypesOptions: [],
				disclaimer: "&emsp;&emsp;学生应承诺在销假后严格遵守学校规章制度和相应的法律法规，不会使用任何虚拟定位或其他手段来模糊自己的真实行踪。如使用虚拟定位或其他手段导致销假后不在学校出现，学生将承担由此产生的责任和后果。<br>&emsp;&emsp;如任何因使用虚拟定位或其他手段导致离校而引起的违纪行为或其他法律问题，学生将承担相应的法律后果和学校纪律处分。",
			};
		},
		created() {
			this.user = getUser();
			this.getApplyLeaveLast();
		},
		methods: {
			checkDisclaimer() {
				this.show = false;
			},
			cancelDisclaimer() {
				this.$tab.reLaunch('/pages/index')
			},
			getApplyLeaveLast() {
				getStuLeaveLast({
					stu: this.user.id
				}).then(response => {
					this.leaveData = response.rows[0];
				})
			},
			//调用相机获取图片地址和图片名字
			photo() { // 拍摄或从相册选取上传
				let that = this;
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						this.fileData.name = res.tempFiles[0].name;
						this.fileData.size = res.tempFiles[0].size;
						this.fileData.thumb = res.tempFiles[0].path;
						this.fileData.type = res.tempFiles[0].type;
						this.fileData.url = res.tempFiles[0].path;
					}
				})
			},
			async submitEliminate() {
				if (this.fileData.url != "") {
					this.submitDisabled = true;
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true,
						success: (res) => {
							upload({
								url: '/common/upload',
								filePath: this.fileData.url
							}).then(response => {
								this.eliminateData.stuId = this.user.id;
								this.eliminateData.fileId = response.id;
								this.eliminateData.applyLeaveId = this.leaveData.id;
								// this.eliminateData.disclaimerId;
								this.eliminateData.location = res.longitude + " " + res.latitude;
								addStuEliminate(this.eliminateData).then(response => {
									if (response.code == 200) {
										uni.$u.toast('销假成功！')
										this.user.isAtSchool = 0;
										setUser(this.user)
										setTimeout(() => {
											this.$tab.reLaunch('/pages/index')
										}, 800);
									} else {
										this.submitDisabled = false;
										uni.$u.toast('销假失败，请联系辅导员进行销假！')
									}
								})
							}).catch(err => {
								this.submitDisabled = false;
								uni.$u.toast('上传的照片格式不正确，请确认图片格式为jpg或png！');
							})
						},
						fail: (res) => {
							this.submitDisabled = false;
							uni.$u.toast('获取地理位置失败，请尝试授权后重新销假！')
						},
					});
				} else {
					this.submitDisabled = false;
					uni.$u.toast('照片未上传，请上传照片后重新提交！')
				}
			},
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.eliminateForm.setRules(this.rules);
			},
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		text-align: left;
	}

	#index {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 90vh;
		background-color: #ffffff;
		padding: 50rpx 0;

		.form {
			width: 600rpx;
			height: 70vh;
			height: 70vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.uploadImgBox {
		width: 100rpx;
		height: 100rpx;
		background-color: #F8F8F8;
		border: 1rpx solid #DFDFDF;
		// border-radius: 20rpx;
	}
</style>
